<template>
  <div class="distribution-analysis">
    <!-- 月选择器 -->
    <div class="monthly-option">
      <el-radio-group class="header-radio mr-8" v-model="month">
        <el-radio-button v-for="(item, index) in MonthlyOption" :key="index" :label="item.value">{{
          item.label
        }}</el-radio-button>
      </el-radio-group>
    </div>
    <!-- 饼图和柱状图 -->
    <!-- <div > -->
    <el-row class="pieBar-container" :gutter="16">
      <el-col :span="10">
        <PieChart :month="month" />
      </el-col>
      <el-col :span="14">
        <BarChart :month="month" />
      </el-col>
    </el-row>
    <!-- </div> -->
    <!-- 瀑布图 -->
    <div class="sankey-container">
      <sankeyEchart :month="month" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import BarChart from './components/BarChart/index.vue';
import PieChart from './components/PieChart/index.vue';
import sankeyEchart from './components/sankeyEchart.vue';
import { MonthlyOption } from '@/constants/enum';

// 月选择器
const month = ref(MonthlyOption[0].value);
</script>

<style scoped lang="scss">
.distribution-analysis {
  .monthly-option {
    display: flex;
    align-items: center;
    padding-bottom: 16px;

    :deep(.el-radio-button) {
      margin: 0 8px;
      .el-radio-button__inner {
        width: 44px;
        height: 32px;
        background: #e8edf3;
        border-radius: 16px;
        padding: unset;
        text-align: center;
        line-height: 32px;
        border: none;
        box-shadow: none;
      }
    }
    :deep(.is-active .el-radio-button__inner) {
      width: 52px;
      background: #fff;
      border: none;
      color: #0a1f33;
      &:before {
        content: '';
        width: 0;
      }
    }
  }
  .pieBar-container {
    height: 420px;
    margin-bottom: 16px;
  }
  .sankey-container {
    height: 700px;
  }
}
</style>
